<template>
  <div class="wrapper">
    <div class="top">
      <div class="tips">买券更优惠</div>
    </div>

    <div class="content">
      <div class="coupons" v-for="(item, index) in couponList" :key="item.id">
        <div class="coupons-content">
          <div class="left">
            <image
              class="coupons-img"
              :src="'https://mini.jiaw.com/img/1653720211206.jpg'"
            ></image>
          </div>

          <div class="right">
            <div class="coupons-money">
              <span>{{ item.disValue }}</span>
              <p>使用期限：{{ item.useTimeEnd }}</p>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="line"></div>
          <div class="rules">
            <p @click="changeRules(index)">使用规则▼</p>
            <p class="rules-item" v-if="current === index && showRules">
              <text>{{ item.rules }}</text>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="money">
      <div class="money-item">
        <span class="expenditure-amount">购券金额</span>
        <div class="preferential-amount">
          <div class="total-money">￥{{ amountSpent }}</div>
          <span class="totalFee">共优惠1800元</span>
        </div>
      </div>
      <div class="btn">
        <button class="buy btns" @click="check">确 认 购 券</button>
        <button class="cancel btns" @click="back">取 消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { buyCoupon } from '@/api'
import mixins from '@/mixins'

export default {
  mixins: [mixins],
  data() {
    return {
      money: '',
      id: '52a24be4-0508-48dc-a8ef-c13c95a37968',
      amountSpent: 99,
      discount: 0,
      couponList: [
        {
          disValue: '1500元使用券',
          name: '',
          money: 150,
          useTimeEnd: '2021/11/6-2021/11/21',
          rules: `1、仅限购买家饰佳宜山店商品使用
2、额度券有效使用期限：2021年11月6 -21日；
3、额度券单笔消费订单满1000元抵用100元，按实际购买金额进行抵扣，单笔订单至多可抵用1500元；
4、额度券换购成功后，不退不换，不找零，不兑换现金；
5、额度券仅限在家饰佳一楼中央收银台付款及家饰佳线上支付使用；
6、部分品牌商户及特价产品不参加活动；
7、使用细则如有变更，以现场告示为准。`
        },
        {
          disValue: 'TOTO\科勒专享券100元抵用券',
          name: '',
          money: 10,
          useTimeEnd: '2021/11/6-2021/11/21',
          rules: `
          1、仅限购买家饰佳宜山店TOTO\科勒品牌使用；
2、本券有效使用期限：2021年11月6 -21日；
3、本券单笔消费订单满3000元抵用100元，单笔订单至多可抵用300元；
4、本券换购成功后，不退不换，不找零，不兑换现金；
5、本券仅限在家饰佳一楼中央收银台付款及家饰佳线上支付使用；
6、部分商品及特价不参加活动；
7、使用细则如有变更，以现场告示为准。`
        },
        {
          disValue: 'TOTO\科勒专享券100元抵用券',
          name: '',
          money: 10,
          useTimeEnd: '2021/11/6-2021/11/21',
          rules: `
          1、仅限购买家饰佳宜山店TOTO\科勒品牌使用；
2、本券有效使用期限：2021年11月6 -21日；
3、本券单笔消费订单满3000元抵用100元，单笔订单至多可抵用300元；
4、本券换购成功后，不退不换，不找零，不兑换现金；
5、本券仅限在家饰佳一楼中央收银台付款及家饰佳线上支付使用；
6、部分商品及特价不参加活动；
7、使用细则如有变更，以现场告示为准。`
        },
        {
          disValue: 'TOTO\科勒专享券100元抵用券',
          name: '',
          money: 10,
          useTimeEnd: '2021/11/6-2021/11/21',
          rules: `
          1、仅限购买家饰佳宜山店TOTO\科勒品牌使用；
2、本券有效使用期限：2021年11月6 -21日；
3、本券单笔消费订单满3000元抵用100元，单笔订单至多可抵用300元；
4、本券换购成功后，不退不换，不找零，不兑换现金；
5、本券仅限在家饰佳一楼中央收银台付款及家饰佳线上支付使用；
6、部分商品及特价不参加活动；
7、使用细则如有变更，以现场告示为准。`
        }
      ],
      current: 0,
      showRules: false
    }
  },
  methods: {
    check() {
      buyCoupon(this.openId, this.id, this.amountSpent, this.couponList).then(
        res => {
          if (res === '您已购买该商品') {
            uni.showToast({
              title: res + '!',
              duration: 1000,
              icon: 'none'
            })
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/home/index'
              })
            }, 2200)
            return
          }
          const { timeStamp, nonceStr, signType, paySign } = res
          wx.requestPayment({
            timeStamp: timeStamp,
            nonceStr: nonceStr,
            package: res.package,
            signType: signType,
            paySign: paySign,
            success: () => {
              uni.showToast({
                title: '买券成功!',
                duration: 1000
              })
              setTimeout(() => {
                uni.navigateTo({
                  url: '/pages/home/index'
                })
              }, 800)
            },
            fail: err => {
              console.log(err)
            }
          })
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
@import url('@/static/css/order.css');
.top {
  height: 120rpx !important;
  .tips {
    font-weight: 600;
    font-size: 32rpx;
    padding: 40rpx 0;
  }
}
.content {
  height: calc(100vh - 450rpx) !important;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }

  .coupon-count {
    color: #df0027;
    height: 70rpx;
    background: #fff;
  }
  .right {
    display: flex;
    flex-direction: row !important;
    .coupons-money {
      display: flex;
      flex-direction: column;
      span {
        padding-right: 30px;
        font-size: 14px !important;
      }
    }
    .coupon-money {
      border: 2px solid red;
      border-radius: 20px;
      color: red;
      width: 60px;
      text-align: center;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
